<!-- 数据字典管理 -->
<template>
  <div>
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="6">
        <EasyTree
          :treeData="treeData"
          :isInputShow="isInputShow"
          :btnListShow="btnListShow"
        ></EasyTree>
      </a-col>
      <a-col class="gutter-row" :span="18">
        <a-form
          ref="formRefLine"
          :model="formInline"
          style="display: flex; justify-content: space-between"
        >
          <a-form-item label="字典名称:">
            <a-input
              v-model="formInline.zhuanghao"
              placeholder="请输入"
              clearable
            />
          </a-form-item>
          <a-form-item label="字典状态:">
            <a-select v-model:value="formInline.region" placeholder="请选择">
              <a-select-option value="shanghai">Zone one</a-select-option>
              <a-select-option value="beijing">Zone two</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item style="margin-right: 0px">
            <div style="width: 100%; display: flex; justify-content: right">
              <a-button
                type="primary"
                @click="search"
                style="margin-right: 20px"
              >
                <template #icon><SearchOutlined /></template>
                搜索
              </a-button>
              <a-button @click="reset">重置</a-button>
            </div>
          </a-form-item>
        </a-form>
        <div>
          <a-button
            @click="openDialog('添加', null)"
            style="margin-right: 20px"
            type="primary"
          >
            <template #icon><PlusOutlined /></template>
            添加用户
          </a-button>
          <a-button @click="delsAll">批量删除</a-button>
        </div>
      </a-col>
    </a-row>
    <a-modal
      v-model:open="modalVisible"
      title="删除确认"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      确认要删除这一列吗？
    </a-modal>
  </div>
</template>

<script setup>
  import EasyTree from './components/EasyTree.vue'
  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
  import { reactive, ref } from 'vue'
  const treeData = ref([
    { title: '0-0', key: '0-0', children: [{ title: '0-0-0', key: '0-0-0' }] },
    // ... 其他节点数据
  ])
  const isInputShow = ref(true)
  const btnListShow = ref(true)
  const formRefLine = ref(null)
  const modalVisible = ref(false)
  const formInline = ref({})
  //搜索
  const search = () => {}
  //重置
  const reset = () => {}
  //打开弹窗
  const openDialog = (title, data) => {}
  //批量删除
  const delsAll = () => {}
  //弹框的确定按钮
  const handleModalOk = () => {}
  //弹框的取消按钮
  const handleModalCancel = () => {}
</script>
<style scoped></style>
